<template>
  <page-frame>
    <div class="order-management">
      <div class="toptitle">
        <div class="left">房间类型</div>
        <div class="right">
          <div class="btns">
            <el-button @click="openAddDialog" class="lightGreenBtn">新增</el-button>
            <el-button @click="toRoom" class="">返回</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="order-content">
        <!--<div class="input">-->
          <!--<el-row>-->
            <!--<el-col style="width:130px">-->
              <!--<div class="input-item">-->
                <!--<el-select style="width:90%!important;"  v-model="queryData.serviceId" clearable placeholder="请选择服务">-->
                  <!--<el-option-->
                    <!--v-for="item in serviceList"-->
                    <!--:label="item.serviceName"-->
                    <!--:value="item.serviceId">-->
                  <!--</el-option>-->
                <!--</el-select>-->
              <!--</div>-->
            <!--</el-col>-->
            <!--<el-col :span="5" >-->
              <!--<div class="input-item" v-show="queryData.serviceId=='1'">-->
                <!--<el-input-->
                  <!--v-model="queryData.roomType"-->
                  <!--style="width:81%!important"-->
                <!--&gt;-->
                <!--</el-input>-->
              <!--</div>-->
            <!--</el-col>-->
            <!--<el-col :span="6" :offset="0">-->
              <!--<div class="btns" style=" width:70%;">-->
                <!--<el-button class="query lightGreenBtn" @click="query">搜索</el-button>-->
              <!--</div>-->
            <!--</el-col>-->
          <!--</el-row>-->
        <!--</div>-->
        <div class="tabs roomTypeTable">
          <table border="0" cellspacing="0">
            <tr>
              <th>房间类型</th>
              <th>描述</th>
              <th>颜色</th>
              <th>操作</th>
            </tr>
            <tr v-for="type in roomTypes">
              <td>{{ type.rmTypeName }}</td>
              <td>{{ type.description }}</td>
              <td>
                <div class="work-typer" :style="{backgroundColor:type.color}"></div>
              </td>
              <td>
                <template v-if="!isPrivateType(type.rmTypeId)">
                  <span><a @click="openEditDialog(type)">编辑</a></span>
                  <span><a @click="removeRoomType(type)">删除</a></span>
                </template>
              </td>
            </tr>
          </table>
        </div>
        <!--新增/编辑房间类型弹框-->
        <el-dialog title="房间类型" v-model="roomTypeDialog" size="tiny" :close-on-click-modal="false">
          <el-form :model="dialogData" :rules="roomTypeDialogRules" ref="roomTypeDialog" label-width="100px">
            <div class="all">
              <div class="input-item">
                <el-form-item label="房间类型名称" prop="rmTypeName">
                  <el-input
                    placeholder="请输入房间类型名称" v-model="dialogData.rmTypeName">
                  </el-input>
                </el-form-item>
              </div>
              <div class="input-item">
                <el-form-item label="房间类型描述" prop="description">
                  <el-input
                    placeholder="请输入房间类型描述" v-model="dialogData.description">
                  </el-input>
                </el-form-item>
              </div>
              <div class="input-item">
                <el-form-item label="房间类型颜色" prop="color">
                  <el-color-picker v-model="dialogData.color"></el-color-picker>
                </el-form-item>
              </div>
            </div>
            <div class="input-item">
              <el-button class="lightGreenBtn " @click="saveRoomType">保存</el-button>
              <el-button class="lightGreenBtn " @click="closeAddDialog">取消</el-button>
            </div>
          </el-form>
        </el-dialog>
      </div>
    </div>
  </page-frame>
</template>


<script type="text/ecmascript-6">
  import {ROOM_TYPE} from '../../constants/roomConstants'
  import roomApi from '../../service/corporation/roomApi'
  export default {
    data() {
      return {
        ROOM_TYPE,
        roomTypes: [],
        dialogData: {
          rmTypeName:"",
          description: "",
          color:"",
        },
        roomTypeDialog: false,
        roomTypeDialogRules: {
          rmTypeName: [{
            required: true, message: '请输入房间类型名称', trigger: 'submit'
          }],
          color: [{
            required: true, message: '请选择房间类型颜色', trigger: 'submit'
          }],
        }
      }
    },
    methods: {
      init(){
        this.loadData();
      },
      loadData(){
        roomApi.getRoomTypes().then(res => {
          this.roomTypes = res.body.data;
        }, res => {})
      },
      clearDialogData() {
        this.dialogData = {
          rmTypeId: null,
          rmTypeName:"",
          description: "",
          color:"",
        };
      },
      openAddDialog(){
        this.roomTypeDialog = true;
      },
      closeAddDialog() {
        this.roomTypeDialog = false;
        this.$refs["roomTypeDialog"].resetFields();
        this.clearDialogData();
      },
      openEditDialog(type){
        this.dialogData = Object.assign({}, type, {
          rmTypeId: type.rmTypeId
        });
        this.roomTypeDialog = true;
      },
      saveRoomType(){
        this.$refs["roomTypeDialog"].validate((valid) => {
          if (valid) {
            roomApi.addOrUpdateRoomType(this.dialogData).then(res => {
              console.log(res.body.data);
              this.closeAddDialog();
              this.init();
            }, res => {});
          } else {
            return false;
          }
        });
      },
      removeRoomType(type) {
        let message = '删除操作不可撤销，确认删除？';
        let title = "删除: " + type.rmTypeName;
        this.$confirm(message, title, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          roomApi.removeRoomType(type.rmTypeId).then(res => {
            this.init();
          }, res => {})
        }).catch(() => {});
      },
      toRoom() {
        this.$router.push({name: "room"});
      },
      isPrivateType(rmTypeId) {
        for(let a in ROOM_TYPE) {
          if(rmTypeId === ROOM_TYPE[a]) {
            return true;
          }
        }
        return false;
      }
    },
    mounted() {
      this.init();
    },
  }
</script>
<style>
  .input-item .remind .el-input__inner{
    border:none;
    padding-left:0;
    padding-right:0;
    width:80%;
    font-weight:bold;
    margin-left:60px;
  }
  .roomTypeTable table{
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    background-color: #fff;
    border: 1px solid #dfe6ec;
    font-size: 14px;
    color: #1f2d3d;
  }
  .roomTypeTable table tr{
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    background-color: #fff;
    border: 1px solid #dfe6ec;
    font-size: 14px;
    color: #1f2d3d;
  }
  .roomTypeTable table tr th,.roomTypeTable table tr:hover{
    background-color: #eef1f6;
  }
  .roomTypeTable table{
    border-right:none;
    border-bottom:none;
  }
  .roomTypeTable table tr th,.roomTypeTable table tr td{
    height:40px;
    line-height:40px;
    border-right:1px solid #dfe6ec;
    border-bottom:1px solid #dfe6ec;
    padding-left: 18px;
    padding-right: 18px;
    vertical-align: middle;
  }
  .roomTypeTable table tr td span{
    cursor:pointer;
    padding: 7px 9px;
  }
  .roomTypeTable .el-color-picker {
    margin-top: 7px;
  }
  .roomTypeTable .work-typer{
    text-align: center;
    line-height: 50px;
    height: 50px;
    width: 100%;
  }
</style>
